<template>
  <div class="header">
    <router-link to="/"  class="back_icon" v-show="showAbs">
      <span class="iconfont">&#xe624;</span>
    </router-link>
    <div class="detail" v-show="!showAbs" :style="opacityStyle">
      <router-link tag="span" class="header_back iconfont" to="/">&#xe624;
      </router-link>
      <router-link to="/" class="detail_btn">查看详情</router-link>
    </div>
  </div>
</template>
<script>
export default {
  name: 'detailHeader',
  data () {
    return {
      showAbs: true,
      opacityStyle: {
        opacity: 0
      }
    }
  },
  methods: {
    handleScroll () {
      let scrollT = document.documentElement.scrollTop
      // console.log(scrollT) 测试其他页面是否被影响。
      // 距离顶端距离大于60时返回按钮消失，详情按钮显示，滚动到140时，详情按钮透明度变为1
      if (scrollT > 60) {
        this.showAbs = false
        let opacity = (scrollT - 60) / 80
        this.opacityStyle = {
          opacity: opacity = opacity > 1 ? 1 : opacity
        }
      } else {
        this.showAbs = true
      }
    }
  },
  // 使用keepalive标签之后组件会有缓存mounted钩子函数不会执行
  // 同时长生两个函数可以再页面每次展示和离开的时候执行，activted，每次页面展示的时候执行，deactivated
  // 每次离开页面时执行
  activated () {
    window.addEventListener('scroll', this.handleScroll)
  },
  // 全局给window绑定事件其他组件会被影响，即其他页面滚动时scroll 事件也是被执行。
  // 每次离开本页时把scroll事件解绑来解决对其他组件的影响。
  deactivated () {
    window.removeEventListener('scroll', this.handleScroll)
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl'
  .header
    position absolute
    top 0
    left 0
    right 0
    .back_icon
      display block
      width .8rem
      height .8rem
      border-radius 50%
      color #fff
      text-align center
      margin-top .2rem
      margin-left .2rem
      background rgba(0, 0, 0, 0.8)
      span
        line-height .8rem
        font-size .4rem
    .detail
      display flex
      position fixed
      font-size .32rem
      color #fff
      top 0
      left 0
      right 0
      height $headerHeight
      line-height $headerHeight
      background $bgColor
      .detail_btn
        flex 1
        text-align center
        color #fff
</style>
